<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model="collapsed" collapsible>
      <div
        :class="$style.topDes"
        :style="collapsed ? 'font-size:15px' : 'font-size: 30px'"
      >
        BISTU
      </div>
      <a-menu theme="dark" mode="inline" @click="changeMenu">
        <a-sub-menu key="map">
          <span slot="title"
            ><a-icon type="compass" /><span>地图展示</span></span
          >
          <a-menu-item :key="k + menu.length" v-for="(v, k) in submenu">
            {{ v.text }}
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item :key="k" v-for="(v, k) in menu">
          <a-icon :type="v.icon" />
          <span>{{ v.text }}</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff;padding: 0;">
        <div :class="$style.headerFlex">
          <h2 :class="$style.headerDes">
            车辆轨迹检索系统
          </h2>
        </div>
      </a-layout-header>
      <a-layout-content style="margin: 0 16px;">
        <a-breadcrumb style="margin: 12px 0;">
          <a-breadcrumb-item
            >{{
              menu[chooseIndex]
                ? menu[chooseIndex].text
                : submenu[chooseIndex - menu.length].text
            }}
          </a-breadcrumb-item>
        </a-breadcrumb>
        <div
          :class="$style.content"
          :style="
            $route.name === 'Map'
              ? 'box-shadow: 0 0 30px #888888;'
              : 'background: #fff'
          "
        >
          <router-view :type="visibleType" />
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import config from '@/common/config'

export default {
  data() {
    return {
      collapsed: false,
      chooseIndex: 0,
      visibleType: '',
      submenu: [
        {
          text: '地图信息',
          name: 'info'
        },
        {
          text: '附近信息查询',
          name: 'near'
        },
        {
          text: '轨迹检索',
          name: 'road'
        }
      ],
      menu: [
        {
          text: 'Geohash算法',
          icon: 'deployment-unit',
          name: config.geohash
        },
        {
          text: 'Google S2算法',
          icon: 'deployment-unit',
          name: config.google
        },
        {
          text: '技术栈',
          icon: 'project',
          name: config.tech
        },
        {
          text: '开源地址',
          icon: 'github',
          name: config.gitee
        }
      ]
    }
  },
  methods: {
    changeMenu(e) {
      if (e.key >= this.menu.length) {
        this.$route.name === 'Map' ? null : this.$router.push({ name: 'Map' })
        this.visibleType = this.submenu[e.key - this.menu.length].name
      } else {
        this.$router.push({ name: this.menu[e.key].name })
      }
      this.chooseIndex = e.key
    }
  }
}
</script>

<style lang="scss" module>
.topDes {
  height: 35px;
  margin: 20px;
  color: white;
  text-align: center;
  font-size: 30px;
}

.content {
  height: auto;
  width: 100%;
}

.headerFlex {
  display: flex;
  justify-content: space-between;

  .headerDes {
    padding-left: 16px;
  }
}
</style>
